---
title: Details Lists
description: Responsive and customizable details list components for displaying structured data. Built with Tailwind CSS v4, these lists feature striped rows, borders, and dark mode support for modern web applications and dashboards. Optimized for SEO, accessibility, and mobile usability.
category: application
emoji: 🪪
slug: details-list
terms:
  - data
components:
  - { title: 'Base', dark: true }
  - { title: 'Striped', dark: true }
  - { title: 'Bordered', dark: true }
  - { title: 'Striped and bordered', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Details List Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
